<template>
  <div class="picture-container">
    <h2 class="picture-title">分析图片记录</h2>
    <table class="picture-table">
      <thead>
        <tr>
          <th class="small-col">图片类型</th>
          <th class="img-col">图片预览</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="barImg">
          <td class="small-col">行为统计饼状图</td>
          <td class="img-col">
            <img
              :src="barImg"
              class="picture-img"
              alt="条形图"
              @click="showImg(barImg)"
            />
          </td>
        </tr>
        <tr v-if="pieImg">
          <td class="small-col">行为统计雷达图</td>
          <td class="img-col">
            <img
              :src="pieImg"
              class="picture-img"
              alt="饼图"
              @click="showImg(pieImg)"
            />
          </td>
        </tr>
        <tr v-if="visualizeImg">
          <td class="small-col">行为统计条形图</td>
          <td class="img-col">
            <img
              :src="visualizeImg"
              class="picture-img"
              alt="可视化"
              @click="showImg(visualizeImg)"
            />
          </td>
        </tr>
        <tr v-for="img in images" :key="img.file_path">
          <td class="small-col">其它图片</td>
          <td class="img-col">
            <img
              :src="img.file_path"
              class="picture-img"
              alt="分析图片"
              @click="showImg(img.file_path)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div v-if="!barImg && !pieImg && !visualizeImg && images.length === 0" class="no-image-tip">
      暂无分析图片，请先分析视频
    </div>
    <div v-if="dialogImg" class="img-dialog" @click="dialogImg = ''">
      <img :src="dialogImg" class="big-img" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'PicturePanel',
  props: ['analyzedVideoUrl'],
  data() {
    return {
      account: localStorage.getItem('account') || '',
      videoName: localStorage.getItem('currentAnalyzedVideo') || '',
      allResults: [],
      images: [],
      barImg: '',
      pieImg: '',
      visualizeImg: '',
      dialogImg: ''
    }
  },
  mounted() {
    this.fetchResults();
  },
  watch: {
    videoName() {
      this.fetchResults();
    }
  },
  methods: {
    fetchResults() {
      const account = localStorage.getItem('account');
      if (!account) return; // 没有登录不请求
      axios.get('/api/get-results/' + account)
        .then(res => {
          this.allResults = res.data.results || [];
          const imgItem = this.allResults.find(item =>
            item.video_name === this.videoName
          );
          if (imgItem) {
            this.barImg = imgItem.bar_img_path;
            this.pieImg = imgItem.pie_img_path;
            this.visualizeImg = imgItem.visualize_img_path;
          }
          this.images = this.allResults.filter(item =>
            item.video_name === this.videoName &&
            item.file_path &&
            item.file_path.toLowerCase().match(/\.(png|jpg|jpeg)$/)
          );
        });
    },
    showImg(src) {
      this.dialogImg = src;
    }
  }
}
</script>

<style scoped>
.picture-container {
  max-width: 900px;
  margin: 30px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #e0e0e0;
  padding: 30px 20px;
}
.picture-title {
  text-align: center;
  margin-bottom: 25px;
  color: #2a3b4d;
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 2px;
}
.picture-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8fafc;
  table-layout: fixed;
}
.picture-table th,
.picture-table td {
  border: 1px solid #e3e6ea;
  padding: 12px 8px;
  text-align: center;
  font-size: 16px;
  vertical-align: middle;
}
.picture-table th {
  background: #e3f0fa;
  color: #1a2b3c;
  font-weight: 600;
}
.small-col {
  width: 180px;
  max-width: 200px;
  word-break: break-all;
  font-size: 15px;
  padding: 6px 4px;
}
.img-col {
  width: 320px;
  max-width: 340px;
}
.picture-img {
  width: 220px;
  height: 140px;
  object-fit: contain;
  border-radius: 8px;
  border: 1px solid #e3e6ea;
  background: #f4f8fb;
  cursor: pointer;
  transition: box-shadow 0.2s;
  box-shadow: 0 2px 8px #e0e0e0;
}
.picture-img:hover {
  box-shadow: 0 0 12px #1976d2;
}
.no-image-tip {
  color: #888;
  font-size: 18px;
  margin: 40px 0 30px 0;
  text-align: center;
}
.img-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.big-img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
</style>